<template>
  <div id='app'>
		<div class="login-center">
			<!-- 头部 -->
			<div class="chen-logintitle">
				<!-- <p v-for="(index,item) in titlearr" :class="ind==index?'active':''">{{item.title}}<span></span></p> -->
				<p :class="ind==0?'active':''" @click="passclick(0)"><span class="ind">账号密码</span><span class="indline"></span></p>
				<p :class="ind==1?'active':''" @click="passclick(1)"><span class="ind">短信验证</span><span class="indline"></span></p>
			</div>
			<div class="chen-logintop">
				<!-- 账号密码登录 -->
				<div class='chen-loginpass' v-if="ind==0||ind=='0'">
					<!-- 请输入您的手机号 -->
					<div class="loginphone">
						<div class="phone-pic">
							<img src="../../../src/assets/img/person/shouji.png" alt="">
						</div>
						<input type="number" pattern="\d*" placeholder="请输入您的手机号" v-model="phone" maxlength="11">
					</div>
					<!-- 请输入您的密码 -->
					<div class="loginphone">
						<div class="phone-pic">
							<img src="../../../src/assets/img/person/mima.png" alt="">
						</div>
						<input type="password" pattern="\d*" placeholder="请输入密码" v-model="password">
					</div>
					<!-- 点击登录 -->
					<div class="but" :class="phone!=''&&password!=''?'butactive':''" @click="loginenter()">登录</div>
					<div class="forget">
						<p @click="forginlogin()">忘记密码</p>
						<p @click="registlogin()">注册</p>
					</div>
				</div>
				<!-- 验证码登录 -->
				<div class='chen-loginpass' v-else>
					<!-- 请输入您的手机号 -->
					<div class="loginphone">
						<div class="phone-pic">
							<img src="../../../src/assets/img/person/shouji.png" alt="">
						</div>
						<input type="number" pattern="\d*" placeholder="请输入您的手机号" v-model="phone" maxlength="11">
					</div>
					<!-- 请输入验证码 -->
					<div class="loginphone logincode">
						<div class="loginph">
							<div class="phone-pic">
								<img src="../../../src/assets/img/person/yanzheng.png" alt="">
							</div>
							<input type="number" pattern="\d*" placeholder="请输入验证码" v-model="code">
						</div>
						<div class="sendcode sendactive" v-if="codefalse">重新发送<span>({{timecode}}s)</span></div>
						<div class="sendcode" v-else @click="centercode()">发送验证码</div>
					</div>
					<!-- 点击登录 -->
					<div class="but" :class="phone!=''&&code!=''?'butactive':''" @click="logincode()">登录</div>
					<div class="forgetcode">未注册的手机号，验证完即完成注册</div>
				</div>
		  </div>
			
			<!-- 快速登录 -->
			<div class="querylogin">
				<div class="querylogin-top">
					<span class="xspan"></span>
					<span class="querylogin-text">快速登录</span>
					<span class="xspan"></span>
				</div>
				<div class="loginother">
					<div class="loginQQ" @click="loginQQ()">
						<img src="../../../src/assets/img/person/qq.png" alt="">
					</div>
					<div class="loginQQ" @click="loginwechat()" v-if="isWeixin">
						<img src="../../../src/assets/img/person/wx.png" alt="">
					</div>
				</div>
			</div>
			
			<div class="bottomkefu" v-show="hidshow">
				<div class="kefucenter">
				  <p class="kefucenter-active" @click="severclick()">《服务协议》</p>
				  <p>客服电话:</p>
				  <a href="tel:15639255665">15639255665</a>
				</div>
			</div>
			
			<!-- 设置密码弹窗 -->
			<div class="shoewr-chenhoupass">
				<div class="chen-contener chenpass">
					<p class="chen-title">安全提示</p>
					<p class="chen-text">您的账号({{tel}})已在平台注册，为了您的账号安全，请前往设置密码。</p>
					<div class="chen-but">
						<p class="chen-but-no" @click="repeatclose()">取消</p>
						<p class="chen-but-yes" @click="repeatclick()">设置密码</p>
					</div>
				</div>
			</div>
			
			
		</div>
		
    
  </div>
</template>

<script>
    export default {
      data(){
          return{
            ind:0,
			titlearr:[{'title':'账号密码'},{'title':'短信验证'}],
			phone:'',
			tel:'',
			code:'',
			password:'',   //密码
			codefalse:false,
			timecode:60,
			isWeixin:false,
			docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
			showHeight: document.documentElement.clientHeight,   //实时屏幕高度
			hidshow:true,
          }
      },
      methods:{
		  severclick(){
			  this.$router.push({
				  path:'/severce'
			  })
		  },
			// 点击忘记密码
			forginlogin(){
				this.$router.push({
				  path:'/wjmm'
				})
			},
			// 点击注册
			registlogin(){
				// console.log(898)
				this.$router.push({
				  path:'/zhzc'
				})
			},
				
			// 点击账号密码或者短信登录
			passclick(type){
				// console.log(type);
				this.ind=type;
				this.codefalse = false;
			},
			// 获取验证码
			centercode(){
				// console.log(8989);
				var that = this;
				if ((/^1\d{10}$/.test(this.phone))){
				// if ((/^1(0|1|2|3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
					that.codefalse = true;
					var times = 60;
					// var that = this;
					var timer = setInterval(function () {
					  times--;
					  that.timecode = times
						// console.log(that.timecode)
					  if (times <= 0) {
						clearInterval(timer);
						that.codefalse = false;
					  }
					}, 1000)
					that.axios.get(that.$store.state.url + "sms/getSmsCode",{
						params:{
							tel:that.phone,
						}
					}).then(res=>{
					  if (res.data.errcode == 0||res.data.errcode == '0'){
						// console.log(res.data)
						that.$toast({
						  message:res.data.msg,
						  position:'bottom'
						});
					  }else {
						that.$toast({
						  message:res.data.msg,
						  position:'bottom'
						});
					  }
					
					})
				}else{
					that.$toast({
					  message:'请输入正确的手机号',
					  position:'bottom'
					});
				}
			},
			// 验证码登录、
			logincode(){
				// console.log(8998)
				if (!(/^1\d{10}$/.test(this.phone))) {
				// if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
				  this.$toast({
					message:'请输入正确的手机号',
					position:'center'
				  });
				}else if (this.code=='') {
				  this.$toast({
					message:'请输入验证码',
					position:'center'
				  });
				}else{
					var that = this;
					var url = that.$store.state.url + "Login/Login2"
					var data ={
						tel:that.phone,
						code:that.code,
					}
					that.axios({
						method:"POST",
						url:url,
						data:data,
					}).then(res=>{
						// console.log(res);
						var data = res.data;
						if(data.errcode==0||data.errcode=='0'){
							
							var token = data.data.token;
							localStorage.setItem('token',token);
							that.axios.defaults.headers.common['token'] = token;
							// this.i();
							localStorage.setItem("phone",that.phone);
							that.$toast({
							  message:'登录成功',
								position:'center'
							});
							// is_band_wechat is_band_qq 为0没有绑定 为1绑定  一方没有绑定 就引导去绑定第三方
							if((data.data.is_band_wechat==0||data.data.is_band_wechat=='0')&&(data.data.is_band_qq==0||data.data.is_band_qq=='0')){
								setTimeout(function(){
									that.$router.push({
										path:'/bangding'
									})
								},1500)
							}else{
								setTimeout(function(){
									that.$router.go(-1)
// 									that.$router.push({
// 										path:'/ge'
// 									})
								},1500)
							}
						}else{
							that.$toast({
							message:res.data.msg,
								position:'center'
						});
						}
					})
				
				}
			},
			// 点击密码登录
			loginenter(){
				// console.log(111)
				var password = this.password;
				if (!(/^1\d{10}$/.test(this.phone))) {
				// if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
				  this.$toast({
					message:'请输入正确的手机号',
					position:'center'
				  });
				}else if(password==''){
					this.$toast({
					  message:'请输入密码',
					  position:'center'
					});
				}else{
					// this.passLogin();
					this.axios({
						method:"GET",
						url:this.$store.state.url + "User/checkAccount",
						params:{
							tel:this.phone,
							type:1
						}
					}).then(res=>{
						var data = res.data.data;
						if(data.set_pass==0||data.set_pass=='0'){ 
							var tel1 = this.phone;
							this.tel = tel1.substr(0,3) + "****" + tel1.substr(7);
							$('.shoewr-chenhoupass').fadeIn();
						}else{
							this.passLogin();
						}
					})
					
				}
			},
			// 密码登录
			passLogin(){
				var that = this;
				var url = this.$store.state.url + "User/passLogin"
				var data ={
					tel:this.phone,
					password:this.password,
				}
				this.axios({
					method:"POST",
					url:url,
					data:data,
				}).then(res=>{
					// console.log(res);
					var data = res.data;
					if(data.errcode==0||data.errcode=='0'){
						var token = data.data.token;
						window.localStorage.setItem('token',token);
						that.axios.defaults.headers.common['token'] = token;
						if((data.data.is_band_wechat==0||data.data.is_band_wechat=='0')&&(data.data.is_band_qq==0||data.data.is_band_qq=='0')){
							// setTimeout(function(){
								that.$router.push({
									path:'/bangding'
								})
							// },1500)
						}else{
							this.$toast({
							  message:'登录成功',
								position:'center'
							});
							//set_pass 0 - 未设置密码， 1 - 已设置密码
							setTimeout(function(){
								that.$router.go(-1)
							},1500)
						}
					}else{
						this.$toast({
						message:res.data.msg,
							position:'center'
					});
					}
				})
			},
			// 点击取消
			repeatclose(){
				$('.shoewr-chenhoupass').fadeOut();
				$('.shoewr-chenhoupass1').fadeOut();
			},
			// 点击去设置密码
			repeatclick(){
				this.$router.push({
				  path:'/newpassword',
				  query:{
					  type:3,
					  tel:this.phone
				  }
				})
			},
			
			// 快速登录  QQ
			loginQQ(){
				var mainpath = this.$store.state;
				localStorage.setItem('loginsucc',1);
				//判断是否在微信打开
				var url1 = this.$route.fullPath;
				// var url = url1.split("/")[1];
				// console.log(url1)
				var url2 = encodeURIComponent(url1);
				window.localStorage.setItem('hrefurl',url2);
				
				var urllogin = window.location.href.split('#')[0];
				// window.location.href=mainpath.url+'User/QQLogin?route=gd&fromsource='+mainpath.fromsource+'';
				window.location.href=mainpath.url+'User/QQLogin?to='+urllogin+'&route=gd&fromsource='+mainpath.fromsource+'';
			},
			//快速登录  微信
			loginwechat(){
				// console.log(88);
				var mainpath = this.$store.state;
				localStorage.setItem('loginsucc',1);
				//判断是否在微信打开
				var url1 = this.$route.fullPath;
				// var url = url1.split("/")[1];
				// console.log(url1)
				var url2 = encodeURIComponent(url1);
				window.localStorage.setItem('hrefurl',url2);
				var urllogin = window.location.href.split('#')[0];
				
				window.location.href = mainpath.url+'User/WechatLogin?to='+urllogin+'&route=gd&fromsource='+mainpath.fromsource+''
				// window.location.href = mainpath.url+'User/WechatLogin?route=gd&fromsource='+mainpath.fromsource+''
			},

      },
	  watch:{
		phone(){
			if(this.ind==0||this.ind=='0'){
				if ((/^1\d{10}$/.test(this.phone))) {
				// if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					window.sessionStorage.setItem('phonetok',this.phone);
					this.axios({
						method:"GET",
						url:this.$store.state.url + "User/checkAccount",
						params:{
							tel:this.phone,
							type:1
						}
					}).then(res=>{
						if(res.data.errcode==0||res.data.errcode=='0'){
							var data = res.data.data;
							if(data.set_pass==0||data.set_pass=='0'){ 
								var tel1 = this.phone;
								this.tel = tel1.substr(0,3) + "****" + tel1.substr(7);
								$('.shoewr-chenhoupass').fadeIn();
							}
						}
					})
				}
			}
		},
		 showHeight:function() {
		  if(this.docmHeight > this.showHeight){
		    this.hidshow=false
		  }else{
		    this.hidshow=true
		  }
		}
	  },
      mounted(){
			this.sdk.getJSSDK('','',this.$store.state.url);		
		//键盘顶起问题
		window.onresize = ()=>{
		  return(()=>{
			this.showHeight = document.documentElement.clientHeight;
		  })()
		}
		
		//判断是否在微信中打开
		var ua = navigator.userAgent.toLowerCase();
		var isWeixin = ua.indexOf('micromessenger') != -1;
		if(isWeixin){
			this.isWeixin=true
		}else{
			this.isWeixin=false
		}
				
				
        if(this.$route.query.r){
        	var r = JSON.parse(this.$route.query.r);
					
        	var errcode = r.errcode;
        	
        	// 登录成功
        	if(errcode==0||errcode=='0'){
        		var data = r.data;
				// data.is_band_mobile为0 没有绑定手机号
        		if(data.is_band_mobile=='0'||data.is_band_mobile==0){
        			this.$router.push({
        			    path:'/tel',
						query:{
							tempid:data.tempid,
							oldid:data.oldid
						}
        			})
							this.$route.query.r='';
        		}else{
					    localStorage.setItem('token',r.data.token);
        			this.$toast({
        				message:r.msg,
        				position:'center'
        			});
        		}
        	}else{
        		this.$toast({
        			message:r.msg,
        			position:'center'
        		});
        	}
        					
        }
      },
      
    }
</script>

<style scoped>
	
	input{
		outline: none;
		border: none;
		font-size: .3rem;
		color: #333;
		background: #fff !important;
	}
	.login-center{
		width: 6.3rem;
		margin: auto;
	}
	.chen-logintitle{
		margin-top: 1.1rem;
		display: flex;
		justify-content: space-around;
	}
	.chen-logintitle .ind{
		display: inline-block;
		color: #999999;
		font-size: .34rem;
		font-weight: 600;
		padding-bottom: .2rem;
	}
	.chen-logintitle .active .ind{
		color: #333333 !important;
	}
	.chen-logintitle .active .indline{
		width:100%;
		display: block;
		height: 0.06rem;
		background: #0287FF;
		border-radius: 0.03rem;
	}
	.chen-logintop{
		margin-top: .25rem;
	}
	.loginphone{
		margin-top: .73rem;
		display: flex;
		justify-content: flex-start;
		border-bottom: 1px solid #EDEDED;
		padding-bottom: .18rem;
	}
	.phone-pic{
		width: .4rem;
		height: .4rem;
	}
	.phone-pic img{
		width: 100%;
		height: 100%;
	}
	.loginph{
		display: flex;
		justify-content: space-between;
	}
	.loginph img{
		margin-top: .2rem;
	}
	.loginphone input{
		width: 5.5rem;
		padding-left: .2rem;
	}
	.logincode input{
		width: 3.4rem !important;
	}
	.sendcode{
		width: 2.6rem;
		height: .76rem;
		line-height: .76rem;
		text-align: center;
		color: #0287FF;
		border: 1px solid #0287FF;
		border-radius: .38rem;
		font-size: .3rem;
	}
	.sendcode.sendactive{
		border: 1px solid #EDEDED;
		background: #EDEDED;
		color: #999999;
	}
	.but{
		width:6.3rem;
		height: .88rem;
		background: #EDEDED;
		color: #999999;
		font-size: .3rem;
		line-height: .88rem;
		text-align: center;
		border-radius: .44rem;
		margin-top: 1rem;
	}
	.but.butactive{
		background: #0287FF;
		color: #fff;
	}
	.forget{
		display: flex;
		justify-content: flex-end;
		font-size: .26rem;
		margin-top: .3rem;
	}
	.forget p:nth-child(1){
		padding-right: .2rem;
		color: #999999;
	}
	.forget p:nth-child(2){
		padding-left: .2rem;
		border-left: 1px solid #999999;
		color: #0287FF;
	}
	.forgetcode{
		text-align: center;
		font-size: .26rem;
		color: #999999;
		margin-top: .27rem;
	}
	.querylogin-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 1.6rem;
	}
	.xspan{
	  width:2.35rem;
	  height:0.02rem;
	  background:rgba(237,237,237,1);
	}
	.querylogin-text{
		text-align: center;
		color: #999999;
		font-size: .26rem;
	}
	.loginother{
		margin-top: .42rem;
		display: flex;
		justify-content: center;
		padding-bottom: .5rem;
	}
	.loginQQ{
		width: .76rem;
		height: .76rem;
		/* margin-right: .4rem; */
		margin: auto;
	}
	.loginQQ img{
		width: 100%;
		height: 100%;
	}
	.bottomkefu{
		position: fixed;
		width: 6.3rem;
		bottom: .2rem;
		/* text-align: center; */
	}
	.kefucenter{
		font-size: .24rem;
		display: flex;
		width: 6.3rem;
		justify-content: center;
		color: #999999;
	}
	.kefucenter-active{
		color: #0287FF;
	}
	.kefucenter p:nth-child(2){
		margin:0 0.2rem;
	}
	.kefucenter a{
		display: inline-block;
		color: #999999;
	}
</style>
